<template>
  <div class="content">
    <div class="title">
      权限管理
    </div>
      <section v-if="show.cun">


    <div class="head">
        <div class="left">
          <input v-model="keywords" @keyup.enter="search()" placeholder="请输入搜索内容..." type="text">
          <div class="sousuo" @click="search()">
            <img src="../assets/img/sou.png" alt="">
            搜索
          </div>
        </div>
        <div class="add" @click="configpermiss">
          <img src="../assets/img/bshezhi.png" alt="">
          配置个人权限
        </div>

      </div>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;margin-top:20px;">

        <el-table-column
              type="selection"
              fixed
              width="55">
            </el-table-column>
          <el-table-column
                type="index"
                fixed
                width="50">
           </el-table-column>
       <el-table-column
         prop="real_name"
         label="授权人员"
         width="180">
       </el-table-column>
       <el-table-column
          prop="name"
          label="权限集名程"
          width="180">
          <template slot-scope="scope">
               <p  v-for='item in  scope.row.user_powers'>
                 {{item.name}}
               </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="client_unit"
          label="区域集合"
          width="180">
          <template slot-scope="scope">
               <p  v-for='item in  scope.row.user_region'>
                 {{item.region_name}}
               </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="limit_lock"
          label="锁名称"
          width="180">
         <template slot-scope="scope">
             <p  v-for='item in  scope.row.lock_name'>
               {{item}}
             </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="limit_lock"
          label="安装位置"
          width="180">
         <template slot-scope="scope">
               <p  v-for='item in  scope.row.lock_address'>
                 {{item}}
               </p>
          </template>
        </el-table-column>
        <el-table-column
        width="180"
        label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini" @click='lockedit(scope.row)'>编辑</el-button>
                <el-button
                  @click='delete_userpowers(scope.row)'
                  size="mini"
                  type="danger">删除</el-button>
              </template>
            </el-table-column>
      </el-table>

</section>

      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
       >
       <el-form :model="edit"  label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限集名称" >
       <el-select v-model="edit.name.id" placeholder="请选择">
               <el-option
                 v-for="item in edit.name.options"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
        </el-form-item>
         <el-form-item label="区域集合" >
            <el-select v-model="edit.gather.id" placeholder="请选择">
               <el-option
                 v-for="item in edit.gather.options"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
         </el-form-item>
          <el-form-item label="锁名称" >
            <el-checkbox-group v-model="edit.lockname.id" >
             <el-checkbox       v-for='item in edit.lockname.options'
                                 :label="item.name"
                                 :key="item.id"
                                 :value="item.id"
                                 >
                   </el-checkbox>
              </el-checkbox-group>
          </el-form-item>
       </el-form>
       <div class="btn">
         <span @click="submit">提交</span>
         <span>取消</span>
       </div>
      </el-dialog>








<config v-if="show.children" :isshow='show'></config>

  </div>
</template>

<script>
  import config from '@/components/user_limit'
  import {userpowers_list,lockpowers_list,edit_lockpowers,seregion_list,lock_list,delete_userpowers} from '../js/getApi.js'
  export default{
   components:{
     config
   },
    data(){
      return{
        keywords:'',
        show:{
          cun:true,
          children:false
        },
        tableData:[],
        dialogVisible:false,
        edit:{
          user_id:'',
          name:{
            id:'',
            options:[]
          },
          gather:{
             id:'',
             options:[]
          },
          lockname:{
            id:[],
            options:[]
          }
        }
      }
    },
    methods:{
       async  search(){
           const data=await userpowers_list(this.$store.state.token,this.keywords,1,100);
           this.tableData=data;
        },
        configpermiss(){
          this.show.cun=false;
          this.show.children=true;
        },
      async delete_userpowers(row){
         const data=await delete_userpowers(this.$store.state.token,row.user_id);
         alert(data.msg);
         if(data.code==1){
           this.getlist();
         }
       },
       async submit(){
           let lockid='';
           this.edit.lockname.options.forEach((item)=>{
             this.edit.lockname.id.forEach((id)=>{
               if(id==item.name){
                  lockid+=item.id+',';
               }
             })
           })
           const data=await edit_lockpowers(this.$store.state.token,this.edit.user_id,lockid,this.edit.gather.id,this.edit.name.id);
           alert(data.msg)
            if(data.code==1){
              this.getlist();
              this.dialogVisible=false;
            }
        },
      lockedit(row){
        this.edit.gather.id='';
        this.edit.name.id='';
        this.edit.user_id=row.user_id;
        this.edit.lockname.id=row.lock_name;
        console.log(row)
        this.dialogVisible=true;
      },
     async getlist(){
         const data=await  userpowers_list(this.$store.state.token,'',1,100);
         this.tableData=data;
      }
    },
   async created() {

        this.getlist();
       const authority=await  lockpowers_list(this.$store.state.token,'',1,100);
       const region=await  seregion_list(this.$store.state.token,'',1,100);
       const lock=await lock_list(this.$store.state.token,'',1,100);

       authority.forEach((item)=>{
         this.edit.name.options.push({
           id:item.id,
           name:item.name
         });
       })
       region.forEach((item)=>{
         this.edit.gather.options.push({
           id:item.id,
           name:item.region_name
         });
       })
       lock.list.forEach((item)=>{
         this.edit.lockname.options.push({
           id:item.lock_id,
           name:item.lockname
         });
       })

    }
  }
</script>

<style scoped>
.title{
      height: 84px;
      line-height: 84px;
      color: rgba(5, 5, 5, 100);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      border-bottom: 1px solid #F7F7F7;
  }


  .head{
    margin-top:33px;
   display: flex;
  }
  .head div{
    display: inline-block;
  }

  .head input{
    width: 190px;
    height:30px;
    border-radius:10px 0 0 10px;
    padding-left:10px;
    border: 1px solid rgba(187, 187, 187, 100);
    float: left;
  }
  .sousuo{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    color: #fff;
    cursor: pointer;
  }
  .sousuo img{
    width: 19px;
    height: 19px;
    vertical-align:middle;
  }
.add{
    width: 120px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    color: #fff;
    font-size: 13px;
    margin-left: 50px;
    cursor: pointer;
  }
.add img{
  width: 20px;
  height:20px;
  vertical-align: middle;
}

.btn{
     margin-left: 100px;
     margin-top: 100px;
     }
     .btn span{
       display:inline-block;
       cursor: pointer;
     }
  .btn span:nth-of-type(1){
       width: 100px;
       height: 34px;
       line-height:34px;
       border-radius: 2px;
       background-color: rgba(26, 188, 156, 100);
       color: rgba(255, 255, 255, 100);
       font-size: 14px;
       text-align: center;
       font-family: Roboto;
   }
   .btn span:nth-of-type(2){
       width: 100px;
       height: 34px;
       line-height:34px;
       border-radius: 2px;
       background-color: rgba(255, 255, 255, 100);
       color: rgba(26, 188, 156, 100);
       font-size: 14px;
       text-align: center;
       font-family: Roboto;
       border: 1px solid rgba(26, 188, 156, 100);
       margin-left: 20px;
      }















</style>
